import React, { Component } from 'react'
import './index.css';
export default class Main extends Component {
    render() {
        let { todos } = this.props;
        return (<ul className="todo-main">
            {
                todos.map(item => {
                    return <li key={item.id}>
                        <label>
                            <input type="checkbox" checked={item.done ? 'checked' : ''}
                                onChange={this.checkTodo(item.id)}
                            />
                            <span>{item.title}</span>
                        </label>
                        <button className="btn btn-danger" style={{ display: item.done ? 'block' : 'none' }}
                            onClick={this.deleteTodo(item.id)}
                        >删除</button>
                    </li>
                })
            }
        </ul>
        )
    }
    deleteTodo = (id) => {
        return () => {
            this.props.deleteTodo(id);
        }
    }
    checkTodo = (id) => {
        return e => {
            let status = e.target.checked;
            //设置 状态的修改
            this.props.checkTodo(id, status);
        }
    }

}
